<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>合约交友 - 合约详情</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #5b21b6;
            --primary-light: #a78bfa;
            --primary-dark: #4c1d95;
            --secondary: #0ea5e9;
            --accent: #f97316;
            --success: #10b981;
            --danger: #ef4444;
            --text-primary: #1e293b;
            --text-secondary: #64748b;
            --bg-light: #f8fafc;
            --bg-white: #ffffff;
            --border-light: #e2e8f0;
            --radius: 12px;
            --shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--bg-light);
            color: var(--text-primary);
            padding-top: 55px;
            padding-bottom: 70px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 55px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 15px;
            z-index: 1000;
            border-bottom: 1px solid var(--border-light);
            box-shadow: var(--shadow);
        }
        
        .nav-title {
            font-size: 1.15rem;
            font-weight: 600;
            color: var(--primary-dark);
        }
        
        .nav-action {
            color: var(--text-secondary);
            background: none;
            border: none;
            font-size: 1.2rem;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .nav-action:hover {
            background-color: var(--bg-light);
        }
        
        /* 内容容器 */
        .content-container {
            padding: 15px;
        }
        
        /* 用户信息卡片 */
        .user-card {
            background-color: var(--bg-white);
            border-radius: var(--radius);
            overflow: hidden;
            margin-bottom: 15px;
            box-shadow: var(--shadow);
        }
        
        .user-header {
            position: relative;
            height: 140px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
        }
        
        .user-avatar {
            position: absolute;
            bottom: -50px;
            left: 20px;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 4px solid white;
            object-fit: cover;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
        }
        
        .user-badges {
            position: absolute;
            bottom: -20px;
            left: 105px;
            display: flex;
            gap: 5px;
        }
        
        .user-badge {
            background-color: var(--accent);
            color: white;
            font-size: 0.7rem;
            padding: 3px 8px;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        
        .user-badge.verify {
            background-color: var(--success);
        }
        
        .user-info {
            padding: 60px 20px 20px;
        }
        
        .user-name {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 5px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .user-meta {
            color: var(--text-secondary);
            font-size: 0.85rem;
            margin-bottom: 12px;
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }
        
        .user-rating {
            color: #f59e0b;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .user-intro {
            font-size: 0.9rem;
            line-height: 1.5;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border-light);
        }
        
        .user-stats {
            display: flex;
            justify-content: space-around;
            text-align: center;
            padding: 10px 0;
        }
        
        .stat-item {
            flex: 1;
        }
        
        .stat-value {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--primary);
        }
        
        .stat-label {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }
        
        /* 合约详情卡片 */
        .contract-card {
            background-color: var(--bg-white);
            border-radius: var(--radius);
            padding: 20px;
            margin-bottom: 15px;
            box-shadow: var(--shadow);
        }
        
        .card-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-light);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .contract-status {
            font-size: 0.8rem;
            padding: 3px 10px;
            border-radius: 12px;
            background-color: rgba(16, 185, 129, 0.1);
            color: var(--success);
        }
        
        .contract-status.pending {
            background-color: rgba(249, 115, 22, 0.1);
            color: var(--accent);
        }
        
        .contract-status.closed {
            background-color: rgba(239, 68, 68, 0.1);
            color: var(--danger);
        }
        
        .contract-detail {
            display: flex;
            margin-bottom: 15px;
        }
        
        .detail-label {
            width: 85px;
            color: var(--text-secondary);
            font-size: 0.9rem;
        }
        
        .detail-value {
            flex: 1;
            font-size: 0.9rem;
        }
        
        .contract-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 10px;
        }
        
        .contract-tag {
            background-color: rgba(91, 33, 182, 0.1);
            color: var(--primary);
            padding: 4px 10px;
            border-radius: 15px;
            font-size: 0.8rem;
        }
        
        .contract-description {
            font-size: 0.9rem;
            line-height: 1.6;
            margin-bottom: 15px;
        }
        
        .contract-gallery {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            margin-bottom: 15px;
        }
        
        .gallery-img {
            width: 100%;
            height: 90px;
            object-fit: cover;
            border-radius: 8px;
        }
        
        /* 操作按钮组 */
        .action-buttons {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }
        
        .action-btn {
            flex: 1;
            padding: 12px 0;
            border-radius: 8px;
            font-weight: 500;
            font-size: 0.9rem;
            text-align: center;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }
        
        .primary-btn {
            background-color: var(--primary);
            color: white;
            border: none;
            box-shadow: 0 2px 5px rgba(91, 33, 182, 0.2);
        }
        
        .primary-btn:hover {
            background-color: var(--primary-dark);
            box-shadow: 0 4px 8px rgba(91, 33, 182, 0.3);
        }
        
        .secondary-btn {
            background-color: var(--bg-light);
            color: var(--text-primary);
            border: 1px solid var(--border-light);
        }
        
        .secondary-btn:hover {
            background-color: var(--border-light);
        }
        
        .icon-btn {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--bg-light);
            color: var(--text-secondary);
            border: 1px solid var(--border-light);
            transition: all 0.2s ease;
        }
        
        .icon-btn:hover {
            background-color: var(--border-light);
            color: var(--primary);
        }
        
        /* 标签页样式 */
        .tabs {
            display: flex;
            background-color: var(--bg-white);
            border-radius: var(--radius) var(--radius) 0 0;
            overflow: hidden;
            margin-bottom: 15px;
            box-shadow: var(--shadow);
        }
        
        .tab {
            flex: 1;
            padding: 12px 0;
            text-align: center;
            font-size: 0.95rem;
            font-weight: 500;
            color: var(--text-secondary);
            border-bottom: 2px solid transparent;
            transition: all 0.2s ease;
        }
        
        .tab.active {
            color: var(--primary);
            border-bottom-color: var(--primary);
        }
        
        .tab-content {
            background-color: var(--bg-white);
            border-radius: 0 0 var(--radius) var(--radius);
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: var(--shadow);
        }
        
        .tab-pane {
            display: none;
        }
        
        .tab-pane.active {
            display: block;
        }
        
        /* 留言区域 */
        .message-list {
            max-height: 400px;
            overflow-y: auto;
            padding-right: 5px;
        }
        
        .message-item {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border-light);
        }
        
        .message-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }
        
        .message-content {
            flex: 1;
        }
        
        .message-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
        }
        
        .message-author {
            font-weight: 500;
            font-size: 0.9rem;
        }
        
        .message-time {
            font-size: 0.75rem;
            color: var(--text-secondary);
        }
        
        .message-text {
            font-size: 0.9rem;
            margin-bottom: 8px;
        }
        
        .message-actions {
            display: flex;
            gap: 15px;
            font-size: 0.8rem;
            color: var(--text-secondary);
        }
        
        .message-action {
            display: flex;
            align-items: center;
            gap: 3px;
            cursor: pointer;
        }
        
        .message-action:hover {
            color: var(--primary);
        }
        
        .reply-list {
            margin-left: 20px;
            margin-top: 10px;
            padding-left: 10px;
            border-left: 2px solid var(--border-light);
        }
        
        .reply-item {
            margin-bottom: 10px;
        }
        
        .reply-header {
            display: flex;
            gap: 5px;
            margin-bottom: 3px;
        }
        
        .reply-author {
            font-weight: 500;
            font-size: 0.85rem;
        }
        
        .reply-to {
            color: var(--primary);
            font-size: 0.85rem;
        }
        
        .reply-text {
            font-size: 0.85rem;
            margin-bottom: 5px;
        }
        
        /* 留言输入框 */
        .message-input-container {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 10px 15px;
            background-color: var(--bg-white);
            border-top: 1px solid var(--border-light);
            z-index: 999;
        }
        
        .message-input-box {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        
        .message-input {
            flex: 1;
            padding: 10px 15px;
            border-radius: 20px;
            border: 1px solid var(--border-light);
            font-size: 0.9rem;
            resize: none;
            height: 42px;
            overflow-y: auto;
        }
        
        .message-input:focus {
            outline: none;
            border-color: var(--primary-light);
        }
        
        .send-btn {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background-color: var(--primary);
            color: white;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }
        
        .send-btn:hover {
            background-color: var(--primary-dark);
        }
        
        .input-actions {
            display: flex;
            gap: 10px;
            margin-right: 5px;
        }
        
        .input-action {
            color: var(--text-secondary);
            font-size: 1.1rem;
        }
        
        /* 评价样式 */
        .review-item {
            padding: 15px 0;
            border-bottom: 1px solid var(--border-light);
        }
        
        .review-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        
        .review-author {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .review-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .review-name {
            font-weight: 500;
            font-size: 0.9rem;
        }
        
        .review-rating {
            color: #f59e0b;
        }
        
        .review-date {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }
        
        .review-text {
            font-size: 0.9rem;
            line-height: 1.5;
            margin-bottom: 10px;
        }
        
        .review-photos {
            display: flex;
            gap: 8px;
            margin-bottom: 10px;
        }
        
        .review-photo {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 5px;
        }
        
        /* 相关推荐 */
        .related-contracts {
            display: flex;
            gap: 12px;
            overflow-x: auto;
            padding-bottom: 10px;
        }
        
        .related-item {
            flex: 0 0 200px;
            background-color: var(--bg-white);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow);
        }
        
        .related-img {
            width: 100%;
            height: 120px;
            object-fit: cover;
        }
        
        .related-info {
            padding: 10px;
        }
        
        .related-title {
            font-weight: 500;
            font-size: 0.9rem;
            margin-bottom: 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .related-meta {
            font-size: 0.8rem;
            color: var(--text-secondary);
            display: flex;
            justify-content: space-between;
        }
        
        /* 提示消息 */
        .toast-notification {
            position: fixed;
            bottom: 70px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 8px 16px;
            border-radius: 4px;
            z-index: 9999;
            font-size: 0.85rem;
            opacity: 0;
            transition: opacity 0.3s ease, transform 0.3s ease;
            transform: translate(-50%, 20px);
        }
        
        .toast-notification.show {
            opacity: 1;
            transform: translate(-50%, 0);
        }
        
        /* 模态框样式 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }
        
        .modal-overlay.show {
            opacity: 1;
            visibility: visible;
        }
        
        .modal {
            background-color: var(--bg-white);
            border-radius: var(--radius);
            width: 90%;
            max-width: 350px;
            max-height: 80vh;
            overflow-y: auto;
            transform: translateY(20px);
            transition: transform 0.3s ease;
        }
        
        .modal-overlay.show .modal {
            transform: translateY(0);
        }
        
        .modal-header {
            padding: 15px 20px;
            border-bottom: 1px solid var(--border-light);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .modal-title {
            font-size: 1.1rem;
            font-weight: 600;
        }
        
        .modal-close {
            background: none;
            border: none;
            font-size: 1.2rem;
            color: var(--text-secondary);
        }
        
        .modal-body {
            padding: 20px;
        }
        
        .modal-footer {
            padding: 15px 20px;
            border-top: 1px solid var(--border-light);
            display: flex;
            gap: 10px;
        }
        
        .modal-btn {
            flex: 1;
            padding: 10px 0;
            border-radius: 8px;
            font-weight: 500;
            font-size: 0.9rem;
            text-align: center;
        }
        
        .modal-cancel {
            background-color: var(--bg-light);
            color: var(--text-primary);
            border: 1px solid var(--border-light);
        }
        
        .modal-confirm {
            background-color: var(--primary);
            color: white;
            border: none;
        }
        
        /* 折叠/展开动画 */
        .collapsible {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }
        
        .collapsible.show {
            max-height: 500px;
            transition: max-height 0.5s ease-in;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-action" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">合约详情</div>
        <button class="nav-action" id="shareBtn">
            <i class="fas fa-share-alt"></i>
        </button>
    </div>
    
    <!-- 内容容器 -->
    <div class="content-container">
        <!-- 用户信息卡片 -->
        <div class="user-card">
            <div class="user-header">
                <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="user-avatar">
                <div class="user-badges">
                    <span class="user-badge verify"><i class="fas fa-check"></i> 实名认证</span>
                    <span class="user-badge"><i class="fas fa-star"></i> 优质用户</span>
                </div>
            </div>
            <div class="user-info">
                <div class="user-name">
                    林小雨 <i class="fas fa-female" style="color: var(--secondary);"></i>
                </div>
                <div class="user-meta">
                    <span><i class="fas fa-calendar"></i> 26岁</span>
                    <span><i class="fas fa-map-marker-alt"></i> 距离3.2km</span>
                    <span><i class="fas fa-graduation-cap"></i> 本科</span>
                </div>
                <div class="user-rating">
                    <i class="fas fa-star"></i>
                    <span>4.8</span>
                    <span style="color: var(--text-secondary); font-size: 0.85rem;">(128条评价)</span>
                </div>
                <p class="user-intro">
                    喜欢旅行和摄影，周末经常去城市周边徒步。希望找到志同道合的朋友一起探索小众景点，分享生活中的美好瞬间。性格随和，好相处~
                </p>
                <div class="user-stats">
                    <div class="stat-item">
                        <div class="stat-value">42</div>
                        <div class="stat-label">完成合约</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">186</div>
                        <div class="stat-label">关注者</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">93</div>
                        <div class="stat-label">正在关注</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 合约详情卡片 -->
        <div class="contract-card">
            <div class="card-title">
                <span>周末城市徒步摄影合约</span>
                <span class="contract-status">招募中</span>
            </div>
            
            <div class="contract-detail">
                <div class="detail-label">合约类型</div>
                <div class="detail-value">兴趣伙伴 · 活动邀约</div>
            </div>
            
            <div class="contract-detail">
                <div class="detail-label">开始时间</div>
                <div class="detail-value">2023-10-28 (周六) 09:00</div>
            </div>
            
            <div class="contract-detail">
                <div class="detail-label">合约时长</div>
                <div class="detail-value">1天</div>
            </div>
            
            <div class="contract-detail">
                <div class="detail-label">活动地点</div>
                <div class="detail-value">城市郊野公园</div>
            </div>
            
            <div class="contract-detail">
                <div class="detail-label">预算范围</div>
                <div class="detail-value">AA制 (预计200元以内)</div>
            </div>
            
            <div class="contract-detail">
                <div class="detail-label">招募人数</div>
                <div class="detail-value">3-5人 (已有2人加入)</div>
            </div>
            
            <div class="contract-tags">
                <span class="contract-tag">徒步</span>
                <span class="contract-tag">摄影</span>
                <span class="contract-tag">周末</span>
                <span class="contract-tag">户外</span>
                <span class="contract-tag">AA制</span>
            </div>
            
            <h5 style="font-size: 0.95rem; margin-bottom: 8px;">合约详情</h5>
            <p class="contract-description">
                周末计划去城市郊野公园进行徒步和摄影活动，全程约10公里，难度适中。希望找到同样喜欢摄影和户外活动的朋友一起前往。
                我们可以互相拍照，分享摄影技巧，中午在公园附近的农家菜馆AA制用餐。请自带相机（手机也可）、饮用水和轻便背包。
                集合时间为周六上午9点，在公园南门入口处集合。风雨无阻，期待你的加入！
            </p>
            
            <h5 style="font-size: 0.95rem; margin-bottom: 8px;">活动照片</h5>
            <div class="contract-gallery">
                <img src="https://picsum.photos/id/29/300/300" alt="活动照片1" class="gallery-img">
                <img src="https://picsum.photos/id/28/300/300" alt="活动照片2" class="gallery-img">
                <img src="https://picsum.photos/id/27/300/300" alt="活动照片3" class="gallery-img">
            </div>
        </div>
        
        <!-- 操作按钮组 -->
        <div class="action-buttons">
            <button class="action-btn secondary-btn" id="collectBtn">
                <i class="far fa-heart"></i> 收藏
            </button>
            <button class="action-btn secondary-btn" id="contactBtn">
                <i class="far fa-comment"></i> 私信
            </button>
            <button class="action-btn primary-btn" id="joinBtn">
                <i class="fas fa-user-plus"></i> 加入合约
            </button>
        </div>
        
        <!-- 已加入成员 -->
        <div class="contract-card">
            <div class="card-title">已加入成员 (2人)</div>
            <div style="display: flex; gap: 15px; padding: 5px 0;">
                <div style="text-align: center;">
                    <img src="https://picsum.photos/id/64/100/100" alt="成员1" style="width: 60px; height: 60px; border-radius: 50%; object-fit: cover; margin-bottom: 5px;">
                    <div style="font-size: 0.85rem; font-weight: 500;">林小雨</div>
                    <div style="font-size: 0.75rem; color: var(--accent);">发起人</div>
                </div>
                <div style="text-align: center;">
                    <img src="https://picsum.photos/id/91/100/100" alt="成员2" style="width: 60px; height: 60px; border-radius: 50%; object-fit: cover; margin-bottom: 5px;">
                    <div style="font-size: 0.85rem; font-weight: 500;">张明</div>
                    <div style="font-size: 0.75rem; color: var(--text-secondary);">参与者</div>
                </div>
                <div style="text-align: center; margin-top: 15px;">
                    <div style="width: 60px; height: 60px; border-radius: 50%; border: 2px dashed var(--border-light); display: flex; align-items: center; justify-content: center; margin-bottom: 5px;">
                        <i class="fas fa-plus" style="color: var(--text-secondary);"></i>
                    </div>
                    <div style="font-size: 0.85rem; color: var(--text-secondary);">加入我们</div>
                </div>
            </div>
        </div>
        
        <!-- 标签页 -->
        <div class="tabs">
            <div class="tab active" data-tab="messages">留言 (12)</div>
            <div class="tab" data-tab="reviews">评价 (8)</div>
            <div class="tab" data-tab="related">相关推荐</div>
        </div>
        
        <!-- 留言内容 -->
        <div class="tab-content">
            <div class="tab-pane active" id="messages">
                <div class="message-list">
                    <div class="message-item">
                        <img src="https://picsum.photos/id/91/100/100" alt="用户头像" class="message-avatar">
                        <div class="message-content">
                            <div class="message-header">
                                <div class="message-author">张明</div>
                                <div class="message-time">昨天 14:32</div>
                            </div>
                            <div class="message-text">
                                这个活动听起来很棒！我也喜欢摄影，主要拍风景，可以加入吗？
                            </div>
                            <div class="message-actions">
                                <div class="message-action reply-action" data-id="1">
                                    <i class="far fa-comment"></i> 回复
                                </div>
                                <div class="message-action">
                                    <i class="far fa-thumbs-up"></i> 12
                                </div>
                            </div>
                            
                            <div class="reply-list">
                                <div class="reply-item">
                                    <div class="reply-header">
                                        <span class="reply-author">林小雨</span>
                                        <span class="reply-to">回复 张明</span>
                                    </div>
                                    <div class="reply-text">
                                        欢迎加入！我们正好需要擅长风景摄影的朋友，周六见~
                                    </div>
                                    <div class="message-time">昨天 15:05</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="message-item">
                        <img src="https://picsum.photos/id/65/100/100" alt="用户头像" class="message-avatar">
                        <div class="message-content">
                            <div class="message-header">
                                <div class="message-author">王小红</div>
                                <div class="message-time">2天前</div>
                            </div>
                            <div class="message-text">
                                请问需要自带午餐吗？还是统一安排？
                            </div>
                            <div class="message-actions">
                                <div class="message-action reply-action" data-id="2">
                                    <i class="far fa-comment"></i> 回复
                                </div>
                                <div class="message-action">
                                    <i class="far fa-thumbs-up"></i> 5
                                </div>
                            </div>
                            
                            <div class="reply-list">
                                <div class="reply-item">
                                    <div class="reply-header">
                                        <span class="reply-author">林小雨</span>
                                        <span class="reply-to">回复 王小红</span>
                                    </div>
                                    <div class="reply-text">
                                        我们计划中午在公园附近的农家菜馆AA制用餐，不需要自带午餐，带点小零食和水就可以啦~
                                    </div>
                                    <div class="message-time">2天前</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="message-item">
                        <img src="https://picsum.photos/id/22/100/100" alt="用户头像" class="message-avatar">
                        <div class="message-content">
                            <div class="message-header">
                                <div class="message-author">李强</div>
                                <div class="message-time">3天前</div>
                            </div>
                            <div class="message-text">
                                徒步难度大吗？我平时不太运动，担心跟不上节奏
                            </div>
                            <div class="message-actions">
                                <div class="message-action reply-action" data-id="3">
                                    <i class="far fa-comment"></i> 回复
                                </div>
                                <div class="message-action">
                                    <i class="far fa-thumbs-up"></i> 3
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 评价内容 -->
            <div class="tab-pane" id="reviews">
                <div class="review-item">
                    <div class="review-header">
                        <div class="review-author">
                            <img src="https://picsum.photos/id/91/100/100" alt="评价者头像" class="review-avatar">
                            <div>
                                <div class="review-name">张明</div>
                                <div class="review-rating">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                </div>
                            </div>
                        </div>
                        <div class="review-date">2023-10-15</div>
                    </div>
                    <div class="review-text">
                        小雨组织的活动非常棒，很有耐心，摄影技术也很好，帮我拍了很多好看的照片。期待下次再一起参加活动！
                    </div>
                    <div class="review-photos">
                        <img src="https://picsum.photos/id/36/100/100" alt="评价照片1" class="review-photo">
                        <img src="https://picsum.photos/id/37/100/100" alt="评价照片2" class="review-photo">
                    </div>
                </div>
                
                <div class="review-item">
                    <div class="review-header">
                        <div class="review-author">
                            <img src="https://picsum.photos/id/65/100/100" alt="评价者头像" class="review-avatar">
                            <div>
                                <div class="review-name">王小红</div>
                                <div class="review-rating">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="far fa-star"></i>
                                </div>
                            </div>
                        </div>
                        <div class="review-date">2023-10-02</div>
                    </div>
                    <div class="review-text">
                        活动安排得很周到，就是天气有点热，建议下次可以早点出发避开正午的太阳。总体来说很开心！
                    </div>
                </div>
                
                <div class="review-item">
                    <div class="review-header">
                        <div class="review-author">
                            <img src="https://picsum.photos/id/22/100/100" alt="评价者头像" class="review-avatar">
                            <div>
                                <div class="review-name">李强</div>
                                <div class="review-rating">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star-half-alt"></i>
                                </div>
                            </div>
                        </div>
                        <div class="review-date">2023-09-25</div>
                    </div>
                    <div class="review-text">
                        第一次参加这样的活动，感觉很新鲜。小雨很照顾新手，教了我很多摄影小技巧，收获满满！
                    </div>
                </div>
            </div>
            
            <!-- 相关推荐 -->
            <div class="tab-pane" id="related">
                <div class="related-contracts">
                    <div class="related-item">
                        <img src="https://picsum.photos/id/42/300/200" alt="相关合约1" class="related-img">
                        <div class="related-info">
                            <div class="related-title">城市咖啡馆摄影采风</div>
                            <div class="related-meta">
                                <span><i class="fas fa-user"></i> 3人</span>
                                <span><i class="fas fa-calendar"></i> 周日</span>
                            </div>
                        </div>
                    </div>
                    <div class="related-item">
                        <img src="https://picsum.photos/id/43/300/200" alt="相关合约2" class="related-img">
                        <div class="related-info">
                            <div class="related-title">秋季红叶徒步之旅</div>
                            <div class="related-meta">
                                <span><i class="fas fa-user"></i> 8人</span>
                                <span><i class="fas fa-calendar"></i> 下周末</span>
                            </div>
                        </div>
                    </div>
                    <div class="related-item">
                        <img src="https://picsum.photos/id/44/300/200" alt="相关合约3" class="related-img">
                        <div class="related-info">
                            <div class="related-title">摄影技巧交流沙龙</div>
                            <div class="related-meta">
                                <span><i class="fas fa-user"></i> 12人</span>
                                <span><i class="fas fa-calendar"></i> 周六晚</span>
                            </div>
                        </div>
                    </div>
                    <div class="related-item">
                        <img src="https://picsum.photos/id/45/300/200" alt="相关合约4" class="related-img">
                        <div class="related-info">
                            <div class="related-title">城市夜景拍摄活动</div>
                            <div class="related-meta">
                                <span><i class="fas fa-user"></i> 5人</span>
                                <span><i class="fas fa-calendar"></i> 周五晚</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 留出底部空间 -->
        <div style="height: 80px;"></div>
    </div>
    
    <!-- 留言输入框 -->
    <div class="message-input-container">
        <div class="message-input-box">
            <div class="input-actions">
                <div class="input-action">
                    <i class="far fa-image"></i>
                </div>
                <div class="input-action">
                    <i class="far fa-smile"></i>
                </div>
            </div>
            <textarea class="message-input" placeholder="写下你的留言..."></textarea>
            <button class="send-btn" id="sendMessageBtn">
                <i class="fas fa-paper-plane"></i>
            </button>
        </div>
    </div>
    
    <!-- 加入合约模态框 -->
    <div class="modal-overlay" id="joinModal">
        <div class="modal">
            <div class="modal-header">
                <div class="modal-title">加入合约</div>
                <button class="modal-close" id="closeJoinModal">&times;</button>
            </div>
            <div class="modal-body">
                <p style="font-size: 0.9rem; margin-bottom: 15px;">请简单介绍一下自己，让发起人更好地了解你：</p>
                <textarea style="width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--border-light); min-height: 100px; font-size: 0.9rem;" placeholder="例如：我喜欢摄影2年了，有单反相机，经常参加户外活动..."></textarea>
                <div style="margin-top: 15px;">
                    <div style="font-size: 0.9rem; margin-bottom: 8px; font-weight: 500;">确认信息</div>
                    <div style="font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 5px;">
                        <i class="fas fa-calendar-alt" style="margin-right: 5px;"></i> 2023-10-28 (周六) 09:00
                    </div>
                    <div style="font-size: 0.85rem; color: var(--text-secondary);">
                        <i class="fas fa-map-marker-alt" style="margin-right: 5px;"></i> 城市郊野公园南门
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="modal-btn modal-cancel" id="cancelJoinBtn">取消</button>
                <button class="modal-btn modal-confirm" id="confirmJoinBtn">确认加入</button>
            </div>
        </div>
    </div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 提示消息
        function showToast(message) {
            let toast = document.querySelector('.toast-notification');
            if (toast) {
                toast.remove();
            }
            
            toast = document.createElement('div');
            toast.className = 'toast-notification';
            toast.textContent = message;
            
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.classList.add('show');
            }, 10);
            
            setTimeout(() => {
                toast.classList.remove('show');
                setTimeout(() => toast.remove(), 300);
            }, 2500);
        }
        
        // 标签页切换
        document.querySelectorAll('.tab').forEach(tab => {
            tab.addEventListener('click', function() {
                // 移除所有标签的active类
                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
                // 给当前标签添加active类
                this.classList.add('active');
                
                // 隐藏所有内容面板
                document.querySelectorAll('.tab-pane').forEach(pane => pane.classList.remove('active'));
                // 显示对应内容面板
                const tabId = this.getAttribute('data-tab');
                document.getElementById(tabId).classList.add('active');
            });
        });
        
        // 收藏按钮
        let isCollected = false;
        const collectBtn = document.getElementById('collectBtn');
        collectBtn.addEventListener('click', function() {
            isCollected = !isCollected;
            if (isCollected) {
                this.innerHTML = '<i class="fas fa-heart"></i> 已收藏';
                this.classList.add('primary-btn');
                this.classList.remove('secondary-btn');
                showToast('已收藏该合约');
            } else {
                this.innerHTML = '<i class="far fa-heart"></i> 收藏';
                this.classList.remove('primary-btn');
                this.classList.add('secondary-btn');
                showToast('已取消收藏');
            }
        });
        
        // 私信按钮
        document.getElementById('contactBtn').addEventListener('click', function() {
            showToast('跳转到私信界面');
            // 实际应用中这里会跳转到私信聊天界面
        });
        
        // 加入合约按钮
        const joinModal = document.getElementById('joinModal');
        document.getElementById('joinBtn').addEventListener('click', function() {
            joinModal.classList.add('show');
        });
        
        // 关闭模态框
        document.getElementById('closeJoinModal').addEventListener('click', function() {
            joinModal.classList.remove('show');
        });
        
        document.getElementById('cancelJoinBtn').addEventListener('click', function() {
            joinModal.classList.remove('show');
        });
        
        // 确认加入
        document.getElementById('confirmJoinBtn').addEventListener('click', function() {
            joinModal.classList.remove('show');
            showToast('已提交加入申请，等待发起人确认');
        });
        
        // 发送留言
        document.getElementById('sendMessageBtn').addEventListener('click', function() {
            const input = document.querySelector('.message-input');
            const message = input.value.trim();
            
            if (message) {
                showToast('留言发送成功');
                input.value = '';
                
                // 实际应用中这里会将留言发送到服务器
                // 并刷新留言列表
            } else {
                showToast('请输入留言内容');
            }
        });
        
        // 回复功能
        document.querySelectorAll('.reply-action').forEach(btn => {
            btn.addEventListener('click', function() {
                const messageId = this.getAttribute('data-id');
                const author = this.closest('.message-content').querySelector('.message-author').textContent;
                
                const input = document.querySelector('.message-input');
                input.value = `回复 @${author}: `;
                input.focus();
                
                // 自动调整输入框高度
                input.style.height = 'auto';
                input.style.height = (input.scrollHeight > 100 ? 100 : input.scrollHeight) + 'px';
            });
        });
        
        // 输入框高度自适应
        document.querySelector('.message-input').addEventListener('input', function() {
            this.style.height = 'auto';
            this.style.height = (this.scrollHeight > 100 ? 100 : this.scrollHeight) + 'px';
        });
        
        // 分享按钮
        document.getElementById('shareBtn').addEventListener('click', function() {
            showToast('分享功能已触发');
            // 实际应用中这里会调用分享API
        });
        
        // 返回按钮
        document.getElementById('backBtn').addEventListener('click', function() {
            window.history.back();
        });
        
        // 相关合约点击事件
        document.querySelectorAll('.related-item').forEach(item => {
            item.addEventListener('click', function() {
                showToast('查看相关合约详情');
                // 实际应用中这里会跳转到对应的合约详情页
            });
        });
    </script>
</body>
</html>

